<template>
	<div class="hello">
		<h1>
			模板语法
		</h1>
		<h3>
			双花括号{{msg}}
		</h3>
		<p v-html="rawHtml"></p>
		<div :class="ceshiClass">绑定class属性</div>
		<div :class="ceshiClass">三目运算符{{status ? "    对" : "    错"}}</div>
		<div :class="ceshiClass">{{testArray.split("").reverse().join("")}}</div>
		
		<p v-show="status">我是是否展示</p>
		
		<ul>
			<li v-for="item in testList">{{item.list1}}</li>
		</ul>
		<button></button>
		<div @click="ondivClicked">{{index}}</div>
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'

	export default {
		name: 'App',
		data() {
			return {
				msg: "dddd",
				rawHtml: "<a href='https://www.baidu.com'>百度</a>",
				ceshiClass: "niudingding",
				status:false,
				testArray:"123456",
				testList:[{
					list1:"lee"
				},{
					list1:"huitao"
				}],
				index:1
			}
		},
		methods:{
			ondivClicked(){
				this.index++;
			}
		}
	}
	
</script>